<template>
  <div class="infodetail-container">
    <van-nav-bar
      title="商品详情"
      left-arrow
      left-text="返回"
      @click-left="Pages('')"
    ></van-nav-bar>

    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(item, index) in infoList.type" :key="index">
        <img :src="item.picUrl" />
      </van-swipe-item>
    </van-swipe>

    <div class="content img-list" style="padding: 5px">
      <div class="content-item">
        <span style="margin-top: 5px; font-size: 13px">{{
          infoList.name
        }}</span>
        <div style="display: flex; margin-top: 10px">
          <span style="color: red">{{ "￥" + infoList.price }}</span>
          &nbsp;
          <span
            style="color: gray; text-decoration: line-through; font-size: 13px"
            >{{ "￥" + infoList.realprice }}</span
          >
        </div>
        <div style="display: flex; justify-content: right">
          <span style="font-size: 12px; color: gray">{{ infoList.desc }}</span>
        </div>
        <div>
          <van-cell-group style="margin-top: 10px">
            <van-cell title="材料" :value="infoList.meterial" />
            <van-cell title="包装" :value="infoList.pack" />
            <van-cell title="配送" :value="infoList.dis" />
            <van-cell title="附送" :value="infoList.des" />
          </van-cell-group>
        </div>
        <div>
          <div style="text-align: center; margin-top: 20px">商品详情</div>
          <img :src="infoList.pic" style="width: 100%" />
        </div>
        <div>
          <div style="text-align: center"></div>
          <img :src="infoList.img" style="width: 100%" />
        </div>
      </div>
    </div>

    <div class="info-detail-footer">
      <div @click="Pages('/home')" class="footer">
        <van-icon
          style="
            width: 50px;
            height: 10px;
            text-align: center;
            line-height: 50px;
          "
          name="home-o"
        />
        <div style="text-align: center; font-size: 12px">精选</div>
      </div>
      <div @click="collect">
        <van-icon
          style="
            width: 50px;
            height: 10px;
            text-align: center;
            line-height: 50px;
          "
          name="star-o"
        />
        <div style="text-align: center; font-size: 12px">收藏</div>
      </div>
      <div @click="pages1(infoList)">
        <van-icon
          style="
            width: 50px;
            height: 10px;
            text-align: center;
            line-height: 50px;
          "
          name="shopping-cart-o"
        />
        <div style="text-align: center; font-size: 12px">购物车</div>
      </div>
      <div class="add-shop-btn" @click="getCart">加入购物车</div>
      <div class="buy-btn" @click="runBuy">立即购买</div>
    </div>
  </div>
</template>


<script>
import axios from "axios";
import { Toast } from "vant";
export default {
  data() {
    return {
      images: {},

      infoList: {},
    };
  },
  mounted() {
    this.getData();
    // console.log();
  },
  methods: {
    pages1(infoList) {
      console.log("sfsf");
      console.log("infolist", infoList);
      this.$router.push({
        path: "/cart",
        query: {
          ...infoList,
        },
      });
    },
    Pages(path) {
      // this.$router.push({
      //   path:path,
      // })
      this.$router.go(-1);
    },

    collect() {
      //加入我的收藏
      axios({
        url: "http://127.0.0.1:3000/index/addCoe",
        method: "post",
        data: this.infoList,
      }).then((res) => {
        Toast("收藏成功");
        console.log(res);
      });
    },

    getData() {
      axios({
        url: "http://127.0.0.1:3000/index/list/detail",
        method: "get",
        params: {
          id: this.$route.query.id,
        },
      }).then((res) => {
        //  console.log("111",res.data);
        this.infoList = res.data;
        console.log("详情", this.infoList);
      });
    },

    //  加入购物车
    getCart() {
      axios({
        url: "http://127.0.0.1:3000/index/addShopcart",
        method: "post",
        data: this.infoList,
      }).then((res) => {
        Toast.success("加入购物车成功");
        console.log(res);
      });
    },
    runBuy(item) {
      console.log(this.info);
      this.$router.push({
        path: "/pay",
        query: {
          ...this.infoList,
        },
      });
    },
  },
};
</script>

<style scoped lang='scss'>
.infodetail-container {
  height: 100%;
  .van-swipe img {
    width: 100%;
    height: 300px;
  }
  .info-detail-footer {
    display: flex;
    width: 100%;
    position: absolute;
    top: 570px;
    .footer {
      position: relative;
    }
  }
  .add-shop-btn {
    flex: 1;
    height: 50px;
    background: #3b190a;
    text-align: center;
    line-height: 50px;
    color: #fff;
  }
  .buy-btn {
    flex: 1;
    height: 50px;
    background: #e4393c;
    text-align: center;
    line-height: 50px;
    color: #fff;
  }
}
</style>